import React, { Component } from 'react';
import {LoginStyled} from './LoginStyled'
import qs from "qs";
import { Toast, Modal } from 'antd-mobile'

import Fanhui from 'images/nav/whiteback.png'
import pswImg from 'images/login/pswImg.png'
import yzm from 'images/login/yzm@3x.png'
import yj from 'images/login/yj.png'
import qingchu from 'images/login/qingchu.png'
import email from 'images/login/email@3x.png'


// 头部引入
import Navigation from 'components/Navigation/Navigation'
import Button from 'components/UIButton/UIButton'
import { from } from 'rxjs';
import { totalmem } from 'os';

let timer = null
let body = {}
class Signin extends Component {
  state = {
    showPass : true,
    getCode: '获取验证码'
  }
  
  render() {
    return (
      <LoginStyled>
        <Navigation
          leftImg={Fanhui}
          leftImgWidth='.2rem'
          leftImgHeight='.2rem'
          leftPadding='0 0 0 .15rem'
          // title = "登陆"
          // titleSize = '.17rem'
          clickLeft={() => this.onClickLeft("left")}
        ></Navigation>

        <div className="fromwrap">
          <h2>
            注册
          </h2>

          <div className='one wrap'>
            <img src={email} alt=""/>
            <div className='fu fu1'>
            <input ref='user' className='user' type="text" placeholder='请输入手机号或者邮箱账户'/>
            <Button
            img={qingchu}
            width='.3rem'
            height='.3rem'
            imgWidth='.18rem'
            imgHeight= '.18rem'
            imgGrow = '0'
            clickButton = {this.clickClearBtn}
            ></Button>
            </div>
          </div>

          <div className='two wrap'>
            <img src={yzm} alt=""/>
            <div className='fu fu2'>
            <input ref='yzm' className='yzm' type="text" placeholder='请输入验证码'/>
            <Button
            padding='.03rem'
            width='.7rem'
            height='.2rem'
            borderRadius='.02rem'
            border = '1px solid #ebebeb'
            title={this.state.getCode}
            titleColor='#646464'
            titleSize='.1rem'
            clickButton = {this.clickGetCodeBtn}
            ></Button>
            </div>
          </div>

          <div className='four wrap'>
            <img src={pswImg} alt=""/>
            <div className='fu fu3'>
            <input ref='password' className='password' type="password"  placeholder='请输入密码'/>
            <Button
            img={yj}
            width='.3rem'
            height='.3rem'
            imgWidth='.16rem'
            imgHeight= '.16rem'
            imgGrow = '0'
            selected= {this.state.showPass}
            clickButton = {this.clickClearChangeShow}></Button>
            </div>
          </div>
        
          <div className='four wrap'>
            <img src={pswImg} alt=""/>
            <div className='fu fu4'>
            <input ref='repassword' className='repassword' type="password"  placeholder='请再次输入密码'/>
            
            </div>
          </div>
        
          <Button
          margin = '.4rem 0 0 0'
          title='确定'
          width='100%'
          height='.35rem'
          backgroundColor='#23B5B7'
          titleColor='#fff'
          titleSzie='.16rem'
          borderRadius='.05rem'
          clickButton={this.clickSignup}
          ></Button>
        </div>
      </LoginStyled>
    );
  }

  onClickLeft() {
    this.props.history.go(-1)
  }
  clickClearBtn=()=>{
    console.log('清空')
    const useIpt = document.getElementsByClassName('user')[0]
    useIpt.value = ''
  }
  clickGetCodeBtn = ()=>{
    console.log('getcoe',this.refs.yzm.value)
    // var emreg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
    // if(emreg.test(this.refs.user.value)==false){
    //   Toast.info('请输入您的正确邮箱地址',1)
    //   return
    // }
    if(!this.refs.user.value){
      Toast.info('请输入账号',1)
      return
    }

    this.timerSub()    
    
    body.email = this.refs.user.value

    fetch('/Legang/user/getcode',{   
      method:"POST",
      headers:{
          "Content-type":"application/x-www-form-urlencoded",
      },     
      body: qs.stringify(body)
    })
    
    .then(response => response.json())
    .then(result => {
      console.log(result)
      Toast.info(result.errorMsg)
      
      clearInterval(timer)
            timer = null
            this.setState({
              getCode: '获取验证码',
            })
      // return result
    })
   
  }
  timerSub(){
    if(this.state.getCode === '获取验证码'){
      this.setState({
        getCode: 60,
      })
      timer = setInterval(() => {
        this.setState({            
          getCode: this.state.getCode - 1
        },()=>{
          if(this.state.getCode <1){
            clearInterval(timer)
            timer = null
            this.setState({
              getCode: '获取验证码',
            })
          }
        })
      }, 1000);     
      
    }else{
      console.log('稍等')
    } 
    
  }
  getBodyFromObject(obj){
    let str = JSON.stringify(obj)
    str = str.replace(/\"\:\"/g,'"="')
    str = str.replace(/\"\,\"/g,'"&"')
    str = str.replace(/\"/g,'')
    str = str.replace('{',"")
    str = str.replace('}',"")    
    // console.log(str)
    return str
  }

  clickClearChangeShow=()=>{
   
    this.setState({
      showPass: !this.state.showPass,
    },()=>{
      if(this.state.showPass){
        this.refs.password.type='password'
        this.refs.repassword.type='password'
      }else{
        this.refs.password.type='text'
        this.refs.repassword.type='text'
      }
    }) 
  }
  clickSignup= ()=>{
   


    if(!this.refs.user.value){
      Toast.info('请输入用户名！',1.5)
      return
    }
    // var emreg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
    // if(emreg.test(this.refs.user.value)==false){
    //   Toast.info('请输入您的正确邮箱地址！',1.5)
    //   return
    // }
    if(!this.refs.yzm.value){
      Toast.info('请输入验证码！',1.5)
      return
    }
    if(!this.refs.password.value){
      Toast.info('请输入密码！',1.5)
      return
    }
    if(this.refs.password.value !== this.refs.repassword.value){
      Toast.info('两次密码不一致，请重新输入！',1.5)
      return
    }
    body.email = this.refs.user.value
    body.code = this.refs.yzm.value
    body.password = this.refs.password.value
    console.log(body)

    fetch('/Legang/user/verify',{   
      method:"POST",
      headers:{
          "Content-type":"application/x-www-form-urlencoded",
      },     
      body: qs.stringify(body)
    })    
    .then(response => response.json())
    .then(result => {
      console.log(result)
      // 
      if(result.flag){
        Modal.alert('注册成功', '', [
          { text: '继续注册', onPress: () => console.log('cancel') },
          { text: '前往登录', onPress: () => {
            this.props.history.replace('/myChildRouter/login')
          } },
        ])
      }else{
        Toast.info(result.errorMsg)
      }
      // return result
    })
 
  }
}

export default Signin;